<template>
  <div class="layout">
    <Layout>
      <Header class="header-full">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"><img src="static/images/bom.png"/></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              <span @click="thisIndex1" >主页</span>
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              <span @click="thisIndex2" >公司环境</span>
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
              <span @click="thisIndex3" >招贤纳士</span>
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
              <span @click="thisIndex4" >技术支持</span>
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content>
        <div class="content">
          <div :class="'mid2-size'">{{msg}}</div>
          <div class="row" v-for="item in list">
            <img class="img-class" :class="{'right-class': item.right}" :src="item.img"/>
            <div class="right-div">
              <div class="mid-size">{{ item.name }}</div>
              <div class="mid1-size">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </Content>
      <Footer class="layout-footer-center">2018-2020 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: "recruit",
    data () {
      return {
        msg:'招贤纳士',
        list:[{
          img:'../static/images/cwd.jpg',
          name:'探索我们的世界',
          desc:'我们目前是XX省XX市最大的宠物的一站式服务中心，' +
          '提供宠物的销售、医疗、美容、寄养等多种常规服务，' +
          '同时提供宠物特色婚礼、宠物丧葬等特色业务。'
        },{
          right:true,
          img:'../static/images/cat10.jpg',
          name:'工作机会不仅改变你的职业',
          desc:'你还在寻找工作？加入我们，找到适合你的职位。'
        },{img:'../static/images/cat11.jpg',
          name:'与宠物0距离交流',
          desc:'与萌宠的0距离沟通交流。'
        }]}
    },methods: {
      thisIndex1: function(){
        this.$router.push({path:'/'})
      },
      thisIndex2: function(){
        this.$router.push({path:'/HelloWorld'})
      },
      thisIndex3: function(){
        this.$router.push({path:'/recruit'})
      },
      thisIndex4: function(){
        this.$router.push({path:'/Technology'})
      },

    }
  }
</script>

<style lang="stylus" scoped type="text/stylus">
  .header-full {
    padding 0
  }
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;

    .layout-logo{
      width: 100px;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      float: left;
      position: relative;
      top: 15px;
      left: 20px;
      img{
        width 30%
        height 30px
      }
    }
    .layout-nav{
      width: 450px;
      margin: 0 auto;
      margin-right: 20px;
    }
    .layout-footer-center{
      text-align: center;
    }
    .mid2-size{
      font-size:26px;
      color: black;
    }
    .content {
      background-color gainsboro;
      .row{
        overflow hidden;
        margin-bottom 10px;
        .img-class {
          float left;
          width 50%;
          height 350px;
        }
        .right-class {
          float right;
        }
        .right-div {
          overflow hidden;
          padding 5px 10px;
          height 100%;
          .mid-size{
            font-size:22px;
            color: red
          }
          .mid1-size{
            font-size:18px;
            color: darkslategray
            margin-right:0px;
            text-align left;
          }
        }
      }
    }
  }
</style>
